<template>
  <div>
    <p> 语文:{{score1}} </p>
    <p> 数学:{{score2}} </p>
    <p> 总分:{{total}}  </p>
    <p> 总分:{{total}}  </p>
    <p> 总分:{{total}}  </p>
    <p> 总分:{{getTotal()}}  </p>
    <p> 总分:{{getTotal()}}  </p>
    <p> 总分:{{getTotal()}}  </p>
  </div>
</template>

<script>
export default {
    data() {
    return {
      score1:90,
      score2:100,
    };
  },
  computed: {
    //写函数,一个函数就是一个计算属性
    //注意:
    //1. 函数必须要有返回值
    //2. 不能和data的数据重名
    //3. 使用时不要加括号,就当他是属性来使用
    total(){
    //在这里怎么访问data中的数据呢?
     console.log('我是计算属性');
    return this.score1+this.score2
    }
  },

  methods: {
    //计算属性对比函数最大的优势在于有缓存
    //在当前页面中如果多次访问,建议使用计算属性,因为他只会计算一次
    //依赖的数据如果发生变化,计算属性也只会计算一次后缓存,后续的访问都从缓存中读取
    getTotal(){
     console.log('我是计算属性 getTotal');
      return this.score1+this.score2
    }
  },
};
</script>

<style>

</style>